<template>
  <div>
        <van-nav-bar class="app-nav-bar" title="异常处理修改" left-arrow @click-left="onClickLeft"/>
        <van-cell-group>
        <van-cell title="学号:" :value="tableData.studentNo" />
        <van-cell title="班级:" :value="tableData.className" />
        <van-cell title="学生姓名:" :value="tableData.studentName" />
        <van-cell title="宿舍:" :value="tableData.dorAddress" />
            <van-form @submit="onSubmit">
             <van-field
             readonly
                v-model="statusContent"
                right-icon="arrow"
                label="处理状态"
                placeholder="请选择处理状态"
                @click="statusListShare=true"
            />
            <van-action-sheet 
                v-model="statusListShare"
                title="请选择"
                :actions="status" 
                @select="onSelect" 
            />
             <van-field
                v-model="processDesc"
                label="处理描述"
                placeholder="处理描述"
                :rules="[{ required: true, message: '请填写处理描述' }]"
            />
             <div style="margin:16px">
                <van-button class="btncolor" round block type="info" native-type="submit">提交</van-button>
            </div>
            </van-form>
      </van-cell-group>
  </div>
</template>

<script>
export default {
data(){
        return{
            tableData:[],
            status:[],
            statusListShare:false,
            statusContent:"",
            processDesc:'',
            absenceProcessStatus:''
        }
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1) 
        },
        async getUser(){
            var {data:res} =await this.request.get('app/Attence/getAppExcById?id='+this.$route.params.id)
           this.tableData=res.data;
           console.log(res.data.absenceProcessStatus);
           if(res.data.absenceProcessStatus=="1"){
              this.statusContent="联系不上"
           }else if(res.data.absenceProcessStatus=="2"){
              this.statusContent="已联系确认迟到"
           }else if(res.data.absenceProcessStatus=="3"){
              this.statusContent="已联系确认回家"
           }else{
               this.statusContent="已联系确认擅自离校需进一步处理"
           }
           this.processDesc=res.data.processDesc;
        },
         async onSubmit(){
            var {data:res} = await this.request({
                url:this.$location.editExc,
                method:'post',
                data:this.$qs.stringify({
                    id: this.$route.params.id,
                    absenceProcessStatus: this.absenceProcessStatus,
                    processDesc: this.processDesc
                })
            })
            console.log(res)
            if(res.status==200){
                 this.$toast.success(res.msg)
                 this.$router.push('/AttenceExcList');
            }
        }, 
        onSelect(item){
            this.statusContent=item.name;
            this.absenceProcessStatus=item.value
            this.statusListShare = false;
            // console.log(this.absenceProcessStatus);
        },
        async getStatusListAll(){
            const {data:res} =await this.request({url:this.$location.getProStatusListAll});
            res.data.forEach(item=>{
                this.status.push({
                    value:item.dictValue,
                    name:item.dictLabel
                })
            })
            console.log(res);
            // this.statusContent=res.data.name;
        },
    },
    created(){
        this.getUser();
        this.getStatusListAll();
    }
}
</script>

<style lang="less" scoped>
.van-cell-group{
    margin: 5% 10%;
    .van-form {
        margin: 0;
    }
}
</style>